import { OptionButtons } from 'bumbag';

# OptionButtons

The `OptionButtons` component can be used to render a set of **Checkbox** or **Radio** option buttons.

## Import

```jsx
import { OptionButtons, OptionButton } from 'bumbag'
```

## Usage

### Radio group

To render a set of radio option buttons, set the `type` prop to `"radio"`.

```live
###tab=Uncontrolled Example,type=jsx-live
<OptionButtons
  defaultValue="desktop"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
###

###tab=Controlled Example,type=function-live
function Example() {
  const [viewport, setViewport] = React.useState('desktop');
  return (
    <OptionButtons
      onChange={setViewport}
      value={viewport}
      type="radio"
      options={[
        { label: 'Desktop', value: 'desktop' },
        { label: 'Tablet', value: 'tablet' },
        { label: 'Mobile', value: 'mobile' }
      ]}
    />
  );
}
###
```

### Checkbox group

To render a set of checkbox option buttons, set the `type` prop to `"checkbox"`.

```live
###tab=Uncontrolled Example,type=jsx-live
<OptionButtons
  defaultValue={['desktop', 'mobile']}
  type="checkbox"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
###

###tab=Controlled Example,type=function-live
function Example() {
  const [viewport, setViewport] = React.useState(['desktop', 'mobile']);
  return (
    <OptionButtons
      onChange={setViewport}
      value={viewport}
      type="checkbox"
      options={[
        { label: 'Desktop', value: 'desktop' },
        { label: 'Tablet', value: 'tablet' },
        { label: 'Mobile', value: 'mobile' }
      ]}
    />
  );
}
###
```

### Field

You can also use the `<OptionButtonsField>` component, which internally has a [FieldWrapper](/form/field-wrapper) to wrap form controls such as labels, hint text and validation text.

It accepts a combination of [OptionButtons props](/form/option-buttons/#props) and [FieldWrapper props](/form/field-wrapper/#props).

```live
###tab=Uncontrolled Example,type=jsx-live
<OptionButtonsField
  label="Choose your viewport"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
###

###tab=Controlled Example,type=function-live
function Example() {
  const [viewport, setViewport] = React.useState('');
  return (
    <OptionButtonsField
      label="Choose your viewport"
      onChange={setViewport}
      value={viewport}
      type="radio"
      options={[
        { label: 'Desktop', value: 'desktop' },
        { label: 'Tablet', value: 'tablet' },
        { label: 'Mobile', value: 'mobile' }
      ]}
    />
  );
}
###
```

### Disabled

You can disable the option buttons with the `disabled` prop. If you only want to disable one option, add the `disabled: true` attribute to the option.

```jsx-live
<OptionButtons
  disabled
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

```jsx-live
<OptionButtons
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { disabled: true, label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Colors

```jsx-live
<OptionButtons
  palette="secondary"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### States

Option buttons can use different states (as per palette) such as `danger`, `success` and `warning`.

```jsx-live
<OptionButtons
  state="danger"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Sizes

You can change the size of the option buttons with the `size` prop.

```jsx-live
<OptionButtons
  size="small"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
<OptionButtons
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
<OptionButtons
  size="medium"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
<OptionButtons
  size="large"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Border radius

Change the radius of the outer group with the `borderRadius` prop. It accepts a [border radius value](/the-box-primitive/border-radius).

```jsx-live
<OptionButtons
  borderRadius="0"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Orientation

Option buttons can have a vertical orientation by setting the `orientation` prop to `"vertical"`.

```jsx-live
<OptionButtons
  orientation="vertical"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Vertical breakpoint

To change the vertical breakpoint (defaulted to `"tablet"`), use the `verticalBelow` prop.

```jsx-live
<OptionButtons
  verticalBelow="tablet"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Full width

```jsx-live
<OptionButtons
  isFullWidth
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

### Read only

```jsx-live
<OptionButtons
  readOnly
  defaultValue="desktop"
  type="radio"
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
/>
```

## Accessibility

The `<OptionButtons>` component follows the [WAI ARIA Checkbox Pattern](https://www.w3.org/TR/wai-aria-practices/#checkbox) and [WAI ARIA RadioGroup Pattern](https://www.w3.org/TR/wai-aria-practices/#radiogroup).

### Rules

- The outer wrapper of the `OptionButtons` has a role of `group`.

#### Patterns

- The checkbox or radio has a role of `checkbox` or `radio`.
- When the checkbox or radio has focus, pressing the <Key>Space</Key> key changes the state of the option.
- Pressing <Key>Tab</Key> and <Key>Shift</Key> + <Key>Tab</Key> moves focus in and out of the checkbox or radio group.
- Pressing <Key>Space</Key> checks the selected checkbox or radio button.
- Pressing <Key>Up</Key>, <Key>Down</Key>, <Key>Left</Key> or <Key>Right</Key> will move the current selection to the next or previous item.

#### References

- [WAI ARIA Checkbox Pattern](https://www.w3.org/TR/wai-aria-practices/#checkbox)
- [WAI ARIA RadioGroup Pattern](https://www.w3.org/TR/wai-aria-practices/#radiogroup)

## Props

### OptionButtons Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">defaultValue</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isFullWidth</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onBlur</Code>** <Code fontSize="100" palette="primary">(values: string | string[]) =&#62; void</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(values: string
  | string[], value: string) => void`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">options</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 10 more ... & { ...; })[]`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">palette</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">readOnly</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">&#34;checkbox&#34; | &#34;radio&#34;</Code> <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Group</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">borderRadius</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the border radius of the group.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">orientation</Code>** <Code fontSize="100" palette="primary">&#34;horizontal&#34; | &#34;vertical&#34;</Code> 

Sets the orientation of the group.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">verticalBelow</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"
  | "min-fullHD"
  | "max-fullHD"
  | "min-widescreen"
  | "max-widescreen"
  | "min-desktop"
  | "max-desktop"
  | "min-tablet"
  | "max-tablet"
  | "min-mobile"
  | "max-mobile"`}
</Code>

Sets the breakpoint at which the group should snap to be vertical.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Flex</code></strong> props</Box>

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

### OptionButtonsField Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">optionButtonsProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & CSSProperties & LocalBoxProps & LocalGroupProps & LocalOptionButtonsProps`}
</Code>

Additional props for the OptionButtons component

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>OptionButtons</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">defaultValue</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isFullWidth</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onBlur</Code>** <Code fontSize="100" palette="primary">(values: string | string[]) =&#62; void</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(values: string
  | string[], value: string) => void`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">options</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`(BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 10 more ... & { ...; })[]`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">palette</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">readOnly</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">&#34;checkbox&#34; | &#34;radio&#34;</Code> <Text marginLeft="major-1" fontSize="150" textTransform="uppercase" color="gray">Required</Text>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Group</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">borderRadius</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the border radius of the group.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">orientation</Code>** <Code fontSize="100" palette="primary">&#34;horizontal&#34; | &#34;vertical&#34;</Code> 

Sets the orientation of the group.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">verticalBelow</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"
  | "min-fullHD"
  | "max-fullHD"
  | "min-widescreen"
  | "max-widescreen"
  | "min-desktop"
  | "max-desktop"
  | "min-tablet"
  | "max-tablet"
  | "min-mobile"
  | "max-mobile"`}
</Code>

Sets the breakpoint at which the group should snap to be vertical.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Flex</code></strong> props</Box>

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>FieldWrapper</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">description</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the description text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hint</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the bottom hint text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isOptional</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the optional flag (and displays optional text) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the required flag (and a required astrix) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the label on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">labelType</Code>** <Code fontSize="100" palette="primary">&#34;label&#34; | &#34;legend&#34;</Code> 

Sets the label type on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltip</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltipTriggerComponent</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip trigger component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">validationText</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the bottom validation text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

 <Theme
  component={'OptionButtons'}
  options={[
    { label: 'Desktop', value: 'desktop' },
    { label: 'Tablet', value: 'tablet' },
    { label: 'Mobile', value: 'mobile' }
  ]}
  overrides={[
    'OptionButtons.styles.base',
    'OptionButtons.Button.styles.base'
  ]} />
